<template>
  <ChartHeader title="心理咨询类型分布"></ChartHeader>

  <van-cell-group title="心理咨询人数" inset>
    <van-cell title="心理健康" value="1500" />
    <van-cell title="问题行为" value="1400" />
    <van-cell title="人际关系" value="100" />
    <van-cell title="生活方式 " value="100" />
    <van-cell title="自我认识" value="100" />
  </van-cell-group>
  <van-cell-group title="心理咨询次数" inset>
    <van-cell title="心理健康" value="1500" />
    <van-cell title="问题行为" value="1400" />
    <van-cell title="人际关系" value="100" />
    <van-cell title="生活方式 " value="100" />
    <van-cell title="自我认识" value="100" />
  </van-cell-group>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { ref, defineEmits, defineProps } from 'vue'
import { useVModel } from '@vueuse/core'
import { useDatePicker } from '/@/use/datePicker'
import { useBack } from '/@/use/useRouteBack'
import ChartHeader from './ChartHeader.vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  reserveDate: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue'])

const value = useVModel(props, 'modelValue', emit)

const { back: handleBack } = useBack()

// const showReserveDatePicker = ref(false)

// function onConfirm(date: Date) {
//   showReserveDatePicker.value = false
//   value.value = dayjs(date).format('YYYY-MM-DD')
// }

const { onConfirm, picker: showReserveDatePicker } = useDatePicker(value)
</script>

<style scoped lang="less">
@import url('./board-common.less');
</style>
